<template>
  <view class="activity-card" @click="activityHandleClick">
    <view class="left-card">
      <image :src="imageSrc" class="activity-photo" />
      <view v-if="joined" class="isPassActivity">已参加</view>
    </view>
    <view class="right-card">
      <view class="title">{{ activityTitle }}{{ termName }}</view>
      <view class="info">
        <view class="time-info">
          <image class="info-icon" :src="timeIcon" />
          <view class="time">{{ time }}</view>
          <!-- <view class="other">{{ userNum }}人已体验</view> -->
        </view>
        <view class="position-info">
          <image class="info-icon" :src="positionIcon" />
          <view class="position">{{ position || "无" }}</view>
          <view class="price" v-if="!isPassActivity">￥{{ price }}</view>
          <view class="high-light" v-else>亮点速递</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ActivityCard",
  props: {
    imageSrc: {
      type: String,
      default:
        "https://img3.job1001.com/ypMp/elan/images/careerPath/zty/activityOne.png",
    },
    activityTitle: {
      type: String,
      default: "【深圳】走进科技梦工厂之腾讯有约-中学生职途服务活动",
    },
    time: {
      type: String,
      default: "2024.08.10 周六 9:30",
    },
    userNum: {
      type: String,
      default: "356",
    },
    position: {
      type: String,
      default: "",
    },
    price: {
      type: String,
      default: "39.8",
    },
    isPassActivity: {
      type: Boolean,
      default: false,
    },
    joined: {
      type: Boolean,
      default: false,
    },
    termName: {
      type: String,
      default: "",
    },
    moduleLink: {
      type: String,
      default: "",
    },
    officialAccountLink: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      timeIcon:
        "https://img3.job1001.com/ypMp/elan/images/careerPath/zty/timeIcon.png",
      positionIcon:
        "https://img3.job1001.com/ypMp/elan/images/careerPath/zty/positionIcon.png",
    };
  },
  methods: {
    activityHandleClick() {
      console.log("这里点击了具体活动", this.price);
      this.$emit("activityHandleClick");
      // if (this.isPassActivity) {
      //   // 跳转到往期活动
      //   // let url = "https://mp.weixin.qq.com/s/d1bp8v6Iw1mRj6YsmwguSQ";
      //   if (this.officialAccountLink) {
      //     uni.navigateTo({
      //       url:
      //         "/pagesSub/careerGrow/careerSearch/webview?url=" +
      //         this.officialAccountLink,
      //     });
      //   } else {
      //     return;
      //   }
      // } else {
      //   // 这里应该跳转到微盟活动详情页
      //   uni.navigateToMiniProgram({
      //     appId: "wx614f8a78fff34162",
      //     // path: "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128377299100125",
      //     path: this.moduleLink,
      //     success(res) {},
      //     fail(err) {},
      //   });
      // }
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
$img-base-careerPath: $img-base + "careerPath/";

@font-face {
  font-family: "zihun266hao-shenshihei";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/careerPath/zty/字魂266号-绅士黑.ttf");
}
.activity-card {
  width: 100%;
  height: 180rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 32rpx;
  .left-card {
    width: 240rpx;
    height: 180rpx;
    border-radius: 16rpx;
    position: relative;
    .isPassActivity {
      position: absolute;
      width: 92rpx;
      height: 36rpx;
      background: rgba(46, 46, 46, 0.32);
      box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(5, 32, 55, 0.09);
      border-radius: 24rpx;
      backdrop-filter: blur(4px);
      right: 8rpx;
      top: 8rpx;
      font-family: zihun266hao-shenshihei;
      font-weight: 400;
      font-size: 20rpx;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .activity-photo {
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
  .right-card {
    flex: 1;
    height: 180rpx;
    margin-left: 24rpx;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 800;
      font-size: 28rpx;
      color: #333333;
      height: 88rpx;

      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden; /*这个参数根据需要来决定要不要*/
    }
    .info {
      margin-top: 12rpx;
      .time-info,
      .position-info {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        .info-icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .time-info {
        .time {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          margin-left: 12rpx;
        }
        .other {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #bdbdbd;
          right: 0;
          position: absolute;
        }
      }
      .position-info {
        margin-top: 8rpx;
        .position {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          margin-left: 12rpx;
          width: 270rpx;
          overflow: hidden;
          /* 允许换行但不执行断行 */
          white-space: normal;
          /* -webkit-line-clamp: 行数 */
          display: -webkit-box;
          /* -webkit-box-orient: 竖向排列 */
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          /* 超长文本显示省略号 */
          text-overflow: ellipsis;
        }
        .price {
          font-family: DINPro, DINPro;
          font-weight: bold;
          font-size: 36rpx;
          color: #f04646;
          right: 0;
          position: absolute;
        }
        .high-light {
          width: 128rpx;
          height: 44rpx;
          background: #fff3e3;
          border-radius: 22rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 800;
          font-size: 22rpx;
          color: #ff9439;
          right: 0;
          position: absolute;
        }
      }
    }
  }
}
</style>
